<template>
  <view class="orderPay">
    <view class="pay_num_box">
      <view class="fn-sz-30 fn-cl-666666 text-center mar-bottom-20">支付金额</view>
      <view class="fn-cl-333333 text-center">
        <span class="fn-sz-30">￥</span>
        <span class="fn-sz-90">{{ payOrderPrice }}</span>
      </view>
      <view class="order_pay_num_datails">
        <view class="mar-bottom-20">
          <span class="fn-cl-999999 mar-right-10">商品金额:</span>
          <span class="fn-cl-666666">￥{{ payInfo.order_price }}</span>
        </view>
        <view class="mar-bottom-20">
          <span class="fn-cl-999999 mar-right-10">优惠金额:</span>
          <span class="fn-cl-666666" v-if="curCoupon.id">-￥{{ curCoupon.price }}</span>
          <span class="fn-cl-666666" v-else>￥{{ payInfo.coupon_price }}</span>
        </view>
        <view class="mar-bottom-20">
          <span class="fn-cl-999999 mar-right-10">会员减免:</span>
          <span class="fn-cl-666666" v-if="payInfo.cut_price != '0.00'">-￥{{ payInfo.cut_price }}</span>
          <span class="fn-cl-666666" v-else>￥{{ payInfo.cut_price }}</span>
        </view>
        <view class="mar-bottom-20">
          <span class="fn-cl-999999 mar-right-10">配送费:</span>
          <span class="fn-cl-666666">￥{{ payInfo.deliver_price }}</span>
        </view>
      </view>
    </view>
    <view class="fn-sz-30 mar-bottom-30">优惠券</view>
    <view class="row_box" @tap="goChooseCoupon">
      <view class="fn-sz-240">平台优惠券</view>
      <image src="../../static/images/icon/icon_moer_btn.png" class="icon-28" mode=""></image>
    </view>
    <view class="row_box">
      <view class="fn-sz-240">积分兑换</view>
      <view class="deductible_box">
        <image class="icon-30 mar-right-8" @tap="changScorePay('yes')" v-if="if_score == 'no'"
          src="../../static/images/icon/icon_check_raido_gary.png" mode=""></image>
        <image class="icon-30 mar-right-8" @tap="changScorePay('no')" v-else src="../../static/images/icon/icon_check_raido_fill.png" mode=""></image>
        <span class="fn-sz-26 fn-cl-999999">可抵扣 ￥{{ payInfo.score_price }}元</span>
      </view>
    </view>
    <view class="row_box">
      <view class="fn-sz-240">金币抵扣</view>
      <view class="deductible_box">
        <image class="icon-30 mar-right-8" @tap="changCoinPay('yes')" v-if="if_coin == 'no'" src="../../static/images/icon/icon_check_raido_gary.png"
          mode=""></image>
        <image class="icon-30 mar-right-8" @tap="changCoinPay('no')" v-else src="../../static/images/icon/icon_check_raido_fill.png" mode=""></image>
        <span class="fn-sz-26 fn-cl-999999">可抵扣 ￥{{ payInfo.coin_price }}元</span>
      </view>
    </view>
    <view class="fn-sz-30 mar-bottom-30">支付方式</view>
    <view class="pay_list">
      <view class="save_money_pay" @tap="balancePay">
        <image class="icon-36 mar-right-8" src="../../static/images/icon/icon_save_money_pay.png" mode="">
        </image>
        <span class="fn-sz-30 fn-cl-FFFFFF">省钱卡支付</span>
      </view>
      <view class="wechat_pay" @tap="weiXinPay">
        <image class="icon-36 mar-right-8" src="../../static/images/icon/icon_wechat_pay.png" mode=""></image>
        <span class="fn-sz-30 fn-cl-FFFFFF">微信支付</span>
      </view>

    </view>
    <u-keyboard tips="请输入支付密码" mode="number" :show="keyBoardShow" @change="tapKeyboard" @cancel="cancelKeyboard" @close="closeKeyboard"
      @backspace="backKeyboard" @confirm="confirmKeyboard">
      <view class="password_box">
        <view class="word_item" v-for="(item, index) in pay_pwd.length" :key="index"></view>
      </view>
    </u-keyboard>
    <updatePassPopup ref="pass_popup" />
  </view>
</template>

<script>
import updatePassPopup from './../../components/updatePassPopup/index.vue'
export default {
  components: {
    updatePassPopup
  },
  data () {
    return {
      order_id: '136',
      payInfo: {},
      if_score: 'no',
      if_coin: 'no',
      curCoupon: {},
      pay_pwd: '',
      keyBoardShow: false,
      userInfo: {},
      passError: 0
    };
  },
  onLoad (val) {
    if (val.order_id) {
      this.order_id = val.order_id;
    }
    this.getPayInfo();
  },
  onShow () {
    this.userInfo = uni.getStorageSync('userInfo').member;
  },
  methods: {
    getPayInfo () {
      this.$api.getPayInfo({
        order_id: this.order_id
      }).then(res => {
        console.log(res, '获取支付信息');
        if (res.code == 1) {
          this.payInfo = res.data;
        }
      });
    },
    changScorePay (type) {
      this.if_score = type;
    },
    changCoinPay (type) {
      this.if_coin = type;
    },
    tapKeyboard (e) {
      if (this.pay_pwd.length <= 16) {
        this.pay_pwd += e;
        console.log(this.pay_pwd, '当前密码');
      } else {
        this.$helper.toast('支付密码最长16位!');
      }
    },
    cancelKeyboard (e) {
      this.keyBoardShow = false;
      this.pay_pwd = '';
    },
    closeKeyboard (e) {
      this.keyBoardShow = false;
      this.pay_pwd = '';
    },
    backKeyboard () {
      console.log('撤退');
      this.pay_pwd = this.pay_pwd.slice(0, this.pay_pwd.length - 1);
    },
    confirmKeyboard () {
      let params = {
        order_id: this.order_id,
        if_score: this.if_score,
        if_coin: this.if_coin,
        coupon_id: 0,
        pay_pwd: this.pay_pwd
      };
      if (this.curCoupon.id) {
        params.coupon_id = this.curCoupon.id;
      }
      this.$api.balancePay(params).then(res => {
        console.log(res, '获取支付信息');
        this.$helper.toast(res.msg);
        if (res.code == 1) {
          setTimeout(() => {
            uni.redirectTo({
              url: `/pages/order/goodsOrder?status=payed`
            });
          }, 800);
        } else {
          if (res.msg == '支付密码错误') {
            this.passError++;
            if (this.passError >= 3) {
              this.$refs.pass_popup.openModel();
            }
          }
        }
      });
    },
    balancePay () {
      if (this.userInfo.pay_pwd) {
        this.keyBoardShow = true;
      } else {
        uni.navigateTo({
          url: '/pages/mine/changePassword?type=payOrder'
        });
      }
    },
    goChooseCoupon () {
      if (this.curCoupon) {
        uni.navigateTo({
          url: `/pages/coupon/chooseCoupon?order_id=${this.order_id}&couId=${this.curCoupon.id}`
        });
      } else {
        uni.navigateTo({
          url: `/pages/coupon/chooseCoupon?order_id=${this.order_id}`
        });
      }
    },
    chooseCoupon (val) {
      this.curCoupon = val;
    },
    weiXinPay () {
      let params = {
        order_id: this.order_id,
        if_score: this.if_score,
        if_coin: this.if_coin,
        pay_type: 'WXPay',
        coupon_id: 0
      };
      if (this.curCoupon.id) {
        params.coupon_id = this.curCoupon.id;
      }
      this.$api.weiXinPay(params).then(res => {
        console.log(res, '小程序支付回调');
        if (res.code == 1) {
          uni.requestPayment({
            provider: 'wxpay',
            timeStamp: res.data.pay_info.timeStamp,
            nonceStr: res.data.pay_info.nonceStr,
            package: res.data.pay_info.package,
            signType: res.data.pay_info.signType,
            paySign: res.data.pay_info.paySign,
            success: function (rex) {
              console.log('success:' + JSON.stringify(rex));
              setTimeout(() => {
                uni.redirectTo({
                  url: `/pages/order/goodsOrder?status=payed`
                });
              }, 800);
            },
            fail: function (err) {
              console.log('fail:' + JSON.stringify(err));
              // uni.switchTab({
              // 	url: '/pages/home/home'
              // });
            }
          });
        }
      });
    }
  },
  computed: {
    payOrderPrice () {
      var totalPrice = this.payInfo.order_price * 1;
      if (this.curCoupon.id) {
        totalPrice = totalPrice - this.curCoupon.price;
      }
      if (this.if_score == 'yes') {
        totalPrice = totalPrice - this.payInfo.score_price;
      }
      if (this.if_coin == 'yes') {
        totalPrice = totalPrice - this.payInfo.coin_price;
      }
      if (totalPrice) {
        return totalPrice.toFixed(2);
      } else {
        return 0;
      }
    }
  }
};
</script>

<style lang="scss">
.orderPay {
  padding: 24rpx;
  min-height: 100vh;
  background-color: #f9f9f9;

  .pay_num_box {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 46rpx 24rpx 15rpx;
    margin-bottom: 30rpx;

    .text-center {
      text-align: center;
    }

    .order_pay_num_datails {
      margin-top: 47rpx;
      border-top: 4rpx dashed #666666;
      padding-top: 20rpx;
    }
  }

  .row_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    padding: 24rpx;

    .deductible_box {
      display: flex;
      align-items: center;
    }
  }

  .pay_list {
    .wechat_pay,
    .save_money_pay {
      height: 90rpx;
      background: #09bb07;
      border-radius: 45rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 40rpx;
    }

    .save_money_pay {
      background-color: #fed100;
    }
  }

  .password_box {
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;

    .word_item {
      width: 24rpx;
      height: 24rpx;
      border-radius: 50%;
      background-color: #333;
      margin-right: 10rpx;
    }
  }
}
</style>